<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../libs/jquery-1.4.4.js"></script>
	<script type="text/javascript">
		var DEMODB;

		$(document).ready(function()
		{
			initDatabase();

			$('#button').click(function()
			{
				var newName = $('#valueNaam').val();
				localStorage.setItem("naam", newName);
				console.log(localStorage.getItem("naam"));

				addName(newName);
				getNames();
			});

			if (localStorage.getItem("naam") != null)
			{
				console.log(localStorage.getItem("naam"));
			}
		});

		function initDatabase()
		{
			try {
				if (!window.openDatabase) {
					alert('Databases are not supported in this browser.');
				} else {
					var shortName = 'HRO';
					var version = '1.0';
					var displayName = 'HRO Database';
					var maxSize = 100000; //  bytes
					DEMODB = openDatabase(shortName, version, displayName, maxSize);
					createTables();
				}
			} catch(e) {

				if (e == 2) {
					// Version number mismatch.
					console.log("Invalid database version.");
				} else {
					console.log("Unknown error "+e+".");
				}
				return;
			}
		}

		function createTables()
		{
			DEMODB.transaction(
				function (transaction) {
					transaction.executeSql('CREATE TABLE IF NOT EXISTS names(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL);', []);
				}
			);
		}

		function addName(name)
		{
			DEMODB.transaction(
				function (transaction)
				{
					transaction.executeSql("INSERT INTO names(name) VALUES (?);", [name]);
				}
			);
		}

		function getNames()
		{
			DEMODB.transaction(
				function (transaction)
				{
					transaction.executeSql("SELECT * names", [], dataSelectHandler);
				}
			);
		}

		function dataSelectHandler(transaction, results)
		{
			console.log(results);
		}
	</script>
  </head>
  <body>
	  <input type="text" name="voornaam" id="valueNaam" />
	  <a id="button">KLIK</a>
  </body>
</html>
